<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
  <!-- <script type="text/javascript" src="/static/treepic/echarts.min.js"></script> -->
    <script type="text/javascript" src="/static/treepic/echarts.min.js"></script>
</head>
</html>

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 1500px;height:1000px;"></div>

    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var data = {
    "name": "合同签订",
    "children": [
        {
            "name": "完善需求文档",
            "children": [
                {
                    "name": "完善表单数据结构",
                    "children": [
                        {"name": "WEB后端开发", "value": 18463316},
                        {"name": "小程序前端I", "value": 184171204},
                        {"name": "WEB前端I", "value": 18412227}
                    ]
                },
                {
                    "name": "接口调试",
                    "value": 18463316
                }
            ]
        },
        {
            "name": "中后期汇报",
            "children": [
                {"name": "根据需求文档完善Demo", "value": 184171204},
                {"name": "阿达啊实打实大苏打", "value": 18412227},
                {"name": "PC上部署环境", "value": 18463316}
            ]
        },
        {
            "name": "学习如何沟通",
            "children": [
                {"name": "积极主动的有效沟通", "value": 18463316}
            ]
        },
        {
            "name": "考研复习",
            "children": [
                {"name": "数学复习", "value": 120},
                {"name": "英语复习", "value": 110},
                {"name": "专业课复习", "value": 119},
            
            ]
        }
    ]
};

var option = {
    tooltip: {
        trigger: 'item',
        triggerOn: 'mousemove'
    },
    series:[
        {
            type: 'tree',
            id: 0,
            name: 'tree1',
            data: [data],

            top: '10%',
            left: '8%',
            bottom: '22%',
            right: '20%',

            symbolSize: 12,

            edgeShape: 'polyline',
            edgeForkPosition: '63%',
            initialTreeDepth: 3,

            lineStyle: {
                width: 3
            },

            label: {
                backgroundColor: '#fff',
                position: 'left',
                verticalAlign: 'middle',
                align: 'right'
            },

            leaves: {
                label: {
                    position: 'right',
                    verticalAlign: 'middle',
                    align: 'left'
                }
            },

            emphasis: {
                focus: 'descendant'
            },

            expandAndCollapse: true,
            animationDuration: 550,
            animationDurationUpdate: 750
        }
    ]
};

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>